<style>

</style>

<template>


  <div class="dbs">
    <el-tabs v-model="activeTab" type="card" style="width: 1300px;border: none">
      <!--          模糊查询-->
      <el-form ref="form" :model="form" label-width="30px">
        <el-form-item label="">
                站点ID：<el-input v-model="form.id" style="margin-right: 30px;width: 200px"></el-input>
          站点名称：
          <el-input v-model="form.name" style="margin-right: 20px;width: 200px"></el-input>

          用户名称：
          <el-input v-model="form.yname" style="margin-right: 20px;width: 200px"></el-input>
          站长姓名：
          <el-input v-model="form.pname" style="margin-right: 20px;width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="">
            手机号码：<el-input v-model="form.tel" style="margin-right: 30px;width: 185px"></el-input>
            所在地：
          <el-cascader
              style="margin-right: 20px;width: 215px"
              size="large"
              :options="pcaTextArr"
              v-model="selectedOptions">
          </el-cascader>

          建站时间：
          <el-select v-model="form.buildTime" placeholder="全部" style="width: 200px;margin-right: 20px">
            <el-option label="全部" value=""></el-option>
            <el-option label="近三个月" value="1"></el-option>
            <el-option label="今年内" value="2"></el-option>
            <el-option label="2022年" value="3"></el-option>
            <el-option label="2021年" value="4"></el-option>
            <el-option label="2020年" value="5"></el-option>
            <el-option label="2020年以前" value="6"></el-option>
          </el-select>

          站点状态：
          <el-select v-model="form.status" placeholder="全部状态" style="width: 200px;margin-right: 20px">
            <el-option label="全部状态" value=""></el-option>
            <el-option label="正常" value="1"></el-option>
            <el-option label="已禁用" value="2"></el-option>
            <el-option label="已注销" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="reset">重置</el-button>
        <el-button type="primary" @click="findAll">搜索</el-button>
      </el-form>
      <br>
      <el-button type="primary" @click="addDBS">添加配送站</el-button>
      <el-tab-pane label="配送站管理" name="healthArchives">
        <el-card style="border-color: white">

          <!--          表格部分-->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID"></el-table-column>
            <el-table-column prop="name" label="站点名称"></el-table-column>
            <el-table-column prop="" label="站长用户名/姓名">
              <template slot-scope="scope">
                {{scope.row.pname}}/{{scope.row.yname}}
              </template>
            </el-table-column>
            <el-table-column prop="tel" label="手机号码"></el-table-column>
            <el-table-column prop="address" label="所在地"></el-table-column>
            <el-table-column prop="count" label="配送员"></el-table-column>
            <el-table-column prop="buildTime" label="建站时间"></el-table-column>
            <el-table-column prop="" label="状态">
              <template slot-scope="scope">
                {{ scope.row.status == 1 ? '正常' : scope.row.status == 2?'已禁用':'已注销' }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                    v-if="scope.row.status==1"
                    type="text"
                    size="small"
                    @click="lockk(scope.row)"
                >锁定
                </el-button>
                <el-button
                    v-if="scope.row.status==2"
                    type="text"
                    size="small"
                    @click="unlockk(scope.row)"
                >解锁
                </el-button>
                <el-button
                    type="text"
                    size="small"
                    @click="Bj(scope.row)"
                >编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="current"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </el-card>
      </el-tab-pane>


      <!--          锁定账号的弹出框-->
      <el-dialog title="确定锁定该用户？" :visible.sync="dialogFormVisible">
        用户账号被锁定后将无法下单、评价、请谨慎操作！<br>
        <el-form :model="lockUser" style="margin-top: 25px">
          <el-form-item label="锁定原因：" style="width: 300px">
            <el-select v-model="lockUser.lockk" placeholder="请选择原因" style="width: 200px">
              <el-option label="全部" value=""></el-option>
              <el-option label="账号出现问题" value="1"></el-option>
              <!--        <el-option label="" value="1"></el-option>-->
            </el-select>
          </el-form-item>
          <el-form-item label="补充说明：">
            <el-input placeholder="请输入" v-model="lockUser.supplement" style="width: 600px"></el-input>
            0/200（选填）
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false;qx()">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false;qd()">确 定</el-button>
        </div>
      </el-dialog>


      <!--          解锁的弹框-->
      <el-dialog title="确定解锁该用户？" :visible.sync="dialogFormVisible2">
        用户解锁后将恢复下单、评价、请谨慎操作！<br>
        <div slot="footer" class="dialog-footer" style="margin-top: 20px">
          <el-button @click="dialogFormVisible2 = false;qx()">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible2 = false;qd()">确 定</el-button>
        </div>
      </el-dialog>

    </el-tabs>
  </div>
</template>


<script>

import {
  provinceAndCityData,
  pcTextArr,
  regionData,
  pcaTextArr,
  codeToText,
} from "element-china-area-data";
export default {
  data() {
    return {
      activeTab: 'healthArchives',
      form: {},
      tableData: [
        // 这里是你的数据，格式与截图中的数据相同
      ],
      tableDataAudit: [],
      current: 1,
      pageSize: 10,
      total: 0,
      current1: 1,
      pageSize1: 10,
      total1: 0,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      lockUser: {},
      pcaTextArr,
      selectedOptions:[],
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.findAll();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.findAll();
    },


    //   查询配送站
    findAll() {
      if(this.selectedOptions.length!=0){
        this.form.address=this.selectedOptions[2];
      }
      this.axios.post(`http://localhost:8000/xm-client/xm-distributionstations/findAll?current=${this.current}&pageSize=${this.pageSize}`, this.form).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        if (this.current > res.data.data.pages) {
          this.current = res.data.data.pages;
          this.findAll();
        }
      })
    },



    //   重置的方法
    reset() {
      this.form = {};
      this.selectedOptions=[];
    },


    //   锁定账号
    lockk(row) {
      this.dialogFormVisible = true;
      this.lockUser = row;
    },

    //   解锁账号
    unlockk(row) {
      this.dialogFormVisible2 = true;
      this.lockUser = row;
    },

    //   取消弹框里的数据
    qx() {
      this.lockUser = {};
    },

    //   锁定/解锁用户的方法
    qd(){

      if(this.lockUser.status==1){
        if(this.lockUser.lockk==null){
          this.$message({
            message: '请选择锁定原因',
            type: 'warning'
          });
          this.dialogFormVisible=true
          return;
        }
        this.lockUser.status=2;
      }else{
        this.lockUser.lockk=null;
        this.lockUser.supplement='';
        this.lockUser.status=1;
      }


      console.log(this.lockUser);
      this.axios.post(`http://localhost:8000/xm-client/xm-distributionstations/lockk`,this.lockUser).then(res=>{
        if(res.data.code==200){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
        this.qx();
        this.findAll();
      })
    },


  //   编辑页面
    Bj(row){
      this.$router.push({path:'/addDBS',query:{id:row.id}})
    },

  //   跳转到添加页面
    addDBS(){
      this.$router.push({path:'/addDBS'});
    }
  },

  created() {
    this.findAll();
    // this.findAllAudit();
  }

}
</script>